<script lang="ts" setup>
import {reactive, ref} from "vue";
import { SettingOutlined, EditOutlined, EllipsisOutlined } from '@ant-design/icons-vue';
import {message} from "ant-design-vue";
import type {IListCard} from "@/views/Student/learn/Curriculum/component/data";
import {useListCardData} from "@/views/Student/learn/Curriculum/component/data";
import {useRequest} from "vue-hooks-plus";
import {postCurriculumGetCurriculumBase} from "@/apis/student";

let listCardData:Array<IListCard> = useListCardData()
const handelClickSet = (prama:string):void => {
  message.info(`设置信息${prama}`,1)
}
const handelClickEdit = (prama:string):void => {
  message.info(`进入学习${prama}`,1)
}
const handelClickEllipsis = (prama:string):void => {
  message.info(`共有${prama}`,1)
}
const pagination = reactive<IPageInfo>({
  onChange: (page: number,pageSize) => {
    pagination.pageNum = page
    pagination.pageSize = pageSize
    run()
  },
  pageNum:1,
  pageSize: 8,
  total: 0,
  hideOnSinglePage: true,
  pageSizeOptions:['10', '20', '30', '40']
});
// 获取知识库
let knowledgeBaseData = ref<any>([])
const { loading,run } = useRequest(()=> postCurriculumGetCurriculumBase({
  pageNum: pagination.pageNum,
  pageSize: pagination.pageSize
}),{
  onSuccess: ((res) => {
    console.log(res.data)
    knowledgeBaseData.value = res.data.list
    pagination.total = res.data.total
  })
})
</script>

<template>
  <a-list :grid="{ gutter: 12, column: 4 }" :data-source="knowledgeBaseData" :pagination="pagination">
    <template #renderItem="{ item }">
      <a-list-item style="min-width: 15rem;margin-bottom: 0.72rem">
        <a-card hoverable >
          <template #cover>
            <img
                alt="..."
                :src="item.curriculumCover"
            />
          </template>
          <template #actions>
            <setting-outlined key="setting" @click="handelClickSet(item.curriculumName)"/>
            <edit-outlined key="edit" @click="handelClickEdit(item.curriculumName)"/>
            <ellipsis-outlined key="ellipsis" @click="handelClickEllipsis(item.curriculumNode)"/>
          </template>
          <a-card-meta :title="item.curriculumName" :description="item.curriculumType">
            <template #avatar>
              <a-avatar :src="item.curriculumCover
" />
            </template>
          </a-card-meta>
        </a-card>
      </a-list-item>
    </template>
  </a-list>
</template>

<style scoped lang="scss">

</style>
